<template>
  <el-row class="mx__20 px-20 bg-white main-height">
    <el-col class="current-content-style">
      <el-row type="flex" justify="left" :gutter="0">
        <el-button plain type="primary" @click="changeStatePage">批量读数确认</el-button>
        <download-excel
          class="export-excel-wrapper px-10"
          :data="tableData"
          :fields="json_fields"
          :header="title"
          name="抄表记录.xls"
          :escapeCsv="false"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button plain type="success">导出当前页数据</el-button>
        </download-excel>
      </el-row>
      <el-row class="my-20">
        <el-col :span="24">
          <el-table
            size="medium"
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            :header-row-class-name="
              ({ row, rowIndex }) => {
                if (rowIndex === 0) return 'table-header-bg'
              }
            "
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="customerName" label="客户名称"> </el-table-column>
            <el-table-column prop="waterNumber" label="水表编号"> </el-table-column>
            <el-table-column prop="recordTime" label="账单时间"> </el-table-column>
            <el-table-column prop="recordCreateTime" label="抄表日期"> </el-table-column>
            <el-table-column prop="recordNow" label="抄表读数"> </el-table-column>
            <el-table-column prop="recordLast" label="上月读数"> </el-table-column>
            <el-table-column prop="recordConsumption" label="用水量(吨)"> </el-table-column>
            <el-table-column prop="recordState" label="抄表状态">
              <template v-slot="scope">
                <span
                  :class="{
                    'text-success': scope.row.recordState === 3,
                    'text-primary': scope.row.recordState === 2,
                    'text-warning': scope.row.recordState === 1
                  }"
                  >{{ scope.row.recordState | showRecodeState }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="核实抄表图片">
              <template v-slot="scope">
                <i
                  @click="showImgModal(scope.row)"
                  class="text-20 curser-pointer text-primary mr-20 el-icon-s-comment"
                ></i>
                <!-- <el-button
                  circle
                  plain
                  type="primary"
                  @click="showImgModal(scope.row)"
                  icon="el-icon-s-comment"
                ></el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row class="my-20" style="text-align: right">
        <el-col :span="24">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <el-dialog title="确认水表度数" :visible.sync="visible" width="40%">
        <el-row type="flex" justify="center" align="middle" :style="{ height: '200px' }">
          <el-col>
            <img :scr="recordImgPath" style="border: 1px solid gray; width: 200px; height: 200px" />
          </el-col>
          <el-col>
            <p>水表编号：{{ waterNumber }}</p>
            <p>单月抄表度数：{{ recordNow }}</p>
          </el-col>
        </el-row>
        <el-row class="mt-20">
          <el-col v-if="nowWarterState === 1">
            <span class="text-danger">*</span>
            <span>图片中的度数和抄表度数一致，选择 “通过”，反之选择 “不通过”</span>
          </el-col>
          <el-col v-else>
            <span class="text-danger">* </span>
            <span>此表度数已经确认！</span>
            <span class="text-danger">*</span>
          </el-col>
        </el-row>
        <span v-if="nowWarterState === 1" slot="footer" class="dialog-footer">
          <el-button
            type="danger"
            @click="
              () => {
                changeState(3)
              }
            "
            >不通过</el-button
          >
          <el-button
            type="primary"
            @click="
              () => {
                changeState(2)
              }
            "
            >确认度数</el-button
          >
        </span>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
import { waterRecodeQueryPage, waterRecordConfirmRecord } from '@/config/api'
// 收费管理-抄表记录
export default {
  data() {
    return {
      visible: false,
      recordImgPath: '',
      pageSizes: [10, 20, 30, 50],
      pageSize: 10,
      total: 0,
      currentPage: 1,
      tableData: [],
      recordNow: 0,
      recordIds: [], //选中的
      waterNumber: '',
      nowWarterState: '', // 查看水表的确认状态
      title: '抄表记录表',
      json_fields: {
        抄表记录编号: 'recordId',
        客户名称: 'customerName',
        水表编号: 'waterNumber',
        账单时间: 'recordTime',
        抄表日期: 'recordCreateTime',
        抄表读数: 'recordNow',
        上月读数: 'recordLast',
        用水量: 'recordConsumption',
        抄表状态: {
          field: 'recordState',
          callback: value => {
            switch (value) {
              case 1:
                return '待确认'

              case 2:
                return '已确认'
              case 3:
                return '未通过'
              default:
                return
            }
          }
        }
      },
      json_meta: [
        [
          {
            key: 'charset',
            value: 'utf-8'
          }
        ]
      ]
    }
  },
  created() {
    this.waterRecodeQueryPageHandler()
  },
  filters: {
    // 抄表记录的状态
    showRecodeState(v) {
      if (v === 1) {
        return '待确认'
      } else if (v === 2) {
        return '已确认'
      } else if (v === 3) {
        return '未通过'
      }
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size
      this.waterRecodeQueryPageHandler()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.waterRecodeQueryPageHandler()
    },
    handleSelectionChange(list) {
      console.log(list)
      this.recordIds = []
      list.forEach(el => {
        if (el.recordState === 1) {
          this.recordIds.push(el.recordId)
        }
      })
      console.log('未确认的记录：', this.recordIds)
    },
    // 查询一页抄表记录
    waterRecodeQueryPageHandler() {
      waterRecodeQueryPage({ pageSize: this.pageSize, pageNum: this.currentPage }).then(res => {
        console.log(res)

        if (res.code === 200) {
          console.log(res)
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.$message({
            messsage: '请求后台接口失败',
            type: 'error'
          })
        }
      })
    },
    // 显示确认度数Modal
    showImgModal({ recordImgPath, waterNumber, recordNow, recordState, recordId }) {
      console.log('抄表记录：', { recordImgPath, waterNumber, recordNow, recordState, recordId })
      this.visible = true
      this.recordImgPath = this.imgUrl + recordImgPath
      this.recordNow = recordNow
      this.waterNumber = waterNumber
      this.nowWarterState = recordState
      this.recordIds = [recordId]
    },
    // 确认一个人的度数
    changeState(value) {
      console.log(value)
      let state = value === 2 ? true : false
      waterRecordConfirmRecord({ passOrFail: state, recordIds: this.recordIds }).then(res => {
        if (res.code === 200) {
          this.visible = false
          this.$message({
            type: 'success',
            message: '确认度数成功'
          })
          this.waterRecodeQueryPageHandler()
        } else {
          this.$message({
            type: 'error',
            message: '确认度数，操作失败'
          })
        }
      })
    },
    // 多条数据度数确认
    changeStatePage() {
      this.$confirm('此操作将选中的行中，读数"待确认"的数据设置为读数"已确认", 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.recordIds.length === 0) {
            this.$message({
              type: 'info',
              message: '本页没有需要确认的读数,请选择记录或者选择其他页'
            })
            return
          }
          waterRecordConfirmRecord({ passOrFail: true, recordIds: this.recordIds }).then(res => {
            if (res.code === 200) {
              this.visible = false
              this.$message({
                type: 'success',
                message: '确认度数成功'
              })
              this.waterRecodeQueryPageHandler()
            } else {
              this.$message({
                type: 'error',
                message: '确认度数，操作失败'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量读数确认'
          })
        })
    }
  }
}
</script>

<style></style>
